<template>
	<view class="">
		<NavBar title="订单" :isShowLeftBtn="false">
		</NavBar>
	</view>
	<view class="search_box " style="padding-top: 20rpx;">
		<view class="search_input" :style="searchVal?{width:'710rpx'}:{paddingLeft:'46rpx',width:'666rpx'}">
			<view class="">
				<view class="search_icon" v-if="!searchVal">
					<up-icon name="search" color="#7E7D7D" size="18"></up-icon>
				</view>
				<view class="" style="">
					<up-input placeholder="请输入关键字" border="none" v-model="searchVal" inputAlign="center"
						fontSize="24rpx" @change="onSearchChage"></up-input>
				</view>
			</view>
		</view>
	</view>
	<view class="" style="height: 86rpx;">
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<scroll-view scroll-y="true" :style="{height: contentHeight}" :refresher-threshold="100"
				@scrolltolower="scrolltolowerFun" refresher-enabled="true" refresher-default-style="none">
				<view class="main_list m_t_18" v-if="orderList.length>0">
					<view class="main_item m_b_28" v-for="(item,index) in orderList" :key="index">
						<view class="flex">
							<view class="m_r_20" style="flex-shrink: 0;">
								<!-- <up-image :show-loading="true" :src=""
									width="40rpx" height="38rpx" radius="3"></up-image> -->
							</view>
							<view class="">
								<text class="f_30_0_b u-line-1">
									{{item.shop_name}}
								</text>
							</view>
						</view>
						<view class="hr m_t_26 m_b_20">

						</view>
						<view class="flex">
							<view class="m_r_22" style="flex-shrink: 0;">
								<up-image :show-loading="true" :src="item.catTypeInfo.type_image" width="134rpx"
									height="134rpx" radius="5" mode="widthFix" ></up-image>
							</view>
							<view class="">
								<view class="m_t_12 m_b_40">
									<text class="f_30_0_b">
										车型：{{item.carTypeName}}
									</text>
								</view>
								<view class="">
									<text class="f_24_0 u-line-1" style="color: #8C8C8C;">
										-1次 剩余{{item.after_num}}次
									</text>
								</view>
							</view>
						</view>
						<view class="hr m_t_20 m_b_20">

						</view>
						<view class="flex_both">
							<view class="m_b_12">
								<text class="f_24_0" style="color: #707070;">
									下单时间：{{item.create_time}}
								</text>
							</view>
							<view class="flex">
								<!-- <view class="m_b_12 m_r_20">
								<text class="f_24_0" style="color: #1E1D1D;">
									已核销
								</text>
							</view> -->
								<view class="pj_btn1" @click="toPj(item)" v-if="!item.is_evaluate">
									<text class="f_24_0" style="color: #F95E1A;">
										评价
									</text>
								</view>
								<view class="pj_btn2" v-else>
									<text class="f_24_0" style="color: #8A8989;">
										已评价
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="empty_box" v-if="!loadShow &&orderList.length ==  0">
					<view class="">
						<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
						</up-empty>
					</view>
				</view>
				<view class="loading_box m_t_32 " style="padding-bottom: 32rpx;" v-if="loadShow">
					{{ loadMessage }}
				</view>
			</scroll-view>
		</view>
	</view>
	<Tabbar :activeTab="2"></Tabbar>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	import Tabbar from "@/components/user/tabbar.vue"
	import { roleInfoStore } from "@/stores/user";
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)
	const token = ref()
	const roleInfo = roleInfoStore()
	const goto = (url) => {
		proxy.$gloab.gotoPage(url)
	}
	onLoad(() => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 80 + 22}rpx - env(safe-area-inset-bottom) - 100rpx)`
			}
		});
		token.value = uni.getStorageSync('token');
	})
	onShow(() => {
		if (!token.value) {
			goto('/pages/login/index')
			return
		}
		loadMessage.value = "加载中"
		page.value = 1
		orderList.value = []
		if (!userInfo.value.id) {
			getUserInfo()
		} else {

			getOrderList()
		}
	})
	const userInfo = ref({ id: '' })
	const getUserInfo = async () => {
		let res = await proxy.$http('my.getUserInfo')
		let data = res.data
		userInfo.value = data
		getOrderList()
	}
	// 审核消息列表
	const page = ref(1)
	const loadShow = ref(false)
	const loadMessage = ref('加载中')
	const scrolltolowerFun = () => {
		if (loadShow.value) return
		page.value = ++page.value;
		loadShow.value = true;
		setTimeout(() => {
			getOrderList()
		}, 1000)
	}
	// 评价列表 取前两条
	const orderList = ref([])
	const getOrderList = async () => {
		if (loadMessage.value == '没有更多了') {
			loadShow.value = true;
			setTimeout(() => {
				loadShow.value = false;
			}, 200)
			return
		}
		let res = await proxy.$http('order.getOrderList', { page: page.value, user_id: userInfo.value.id, search: searchVal.value })
		let data = res.data.data
		if (res.code == 1) {
			if (data.length == 0) {
				loadMessage.value = "没有更多了"
			} else {
				orderList.value.push(...data)
			}
		} else {
			loadMessage.value = "加载出错"
		}
		setTimeout(() => {
			loadShow.value = false;
		}, 200)
	}
	const searchVal = ref('')
	const timer = ref(null)
	const onSearchChage = (e) => {
		searchVal.value = e
		loadMessage.value = "加载中"
		page.value = 1
		orderList.value = []
		if (timer.value) {
			clearTimeout(timer.value)
		}
		timer.value = setTimeout(() => {
			getOrderList()
		}, 200)
	}
	const isSel = ref(false)
	const toPj = (e) => {
		goto(`/pages/order/evaluate?id=${e.wash_order_id}`)
	}
</script>
<style lang="scss" scoped>
	.search_box {
		width: 750rpx;
		height: 66rpx;
		background: #F7F8FC;
		position: fixed;

		.search_input {
			padding: 11rpx 0;
			margin-left: 20rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
			border-radius: 34rpx;
			position: relative;


			.search_icon {
				position: absolute;
				left: 260rpx;
				top: 16rpx;
			}
		}
	}

	.content {
		background: #F7F8FC;
		padding: 20rpx;
		// padding-bottom: 64rpx;

		.main {
			.main_list {
				.main_item {
					padding: 26rpx 18rpx;
					padding-top: 18rpx;
					background: #FFFFFF;
					box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
					border-radius: 10rpx;

					.pj_btn1 {
						width: 93rpx;
						height: 47rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
						border: 1px solid #F9761B;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.pj_btn2 {
						width: 114rpx;
						height: 47rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
						border: 1px solid #8F8F8F;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}

	}
	::v-deep.u-image{
		display: flex;
		align-items: center;
	}
</style>